<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Techo - 数字工作手账</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/markdown.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <!-- 侧边栏 -->
      <div class="col-md-3 col-lg-2 sidebar">
        <div class="d-flex flex-column p-3 text-white bg-dark h-100">
          <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <i class="bi bi-journal-text me-2"></i>
            <span class="fs-4">Techo</span>
          </a>
          <hr>
          <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active" id="nav-dashboard">
                <i class="bi bi-speedometer2 me-2"></i>
                控制面板
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white" id="nav-history">
                <i class="bi bi-clock-history me-2"></i>
                历史记录
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white" id="nav-settings">
                <i class="bi bi-gear me-2"></i>
                设置
              </a>
            </li>
          </ul>
          <hr>
          <div class="status-indicator">
            <div class="d-flex align-items-center">
              <div class="status-dot" id="status-indicator"></div>
              <span class="ms-2" id="status-text">未记录</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="col-md-9 col-lg-10 ms-sm-auto px-md-4 main-content">
        <!-- 控制面板 -->
        <div class="content-section" id="dashboard-section">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">控制面板</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <button type="button" class="btn btn-success me-2" id="start-btn">
                <i class="bi bi-play-fill"></i> 开始记录
              </button>
              <button type="button" class="btn btn-danger" id="stop-btn" disabled>
                <i class="bi bi-stop-fill"></i> 停止记录
              </button>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6">
              <div class="card mb-4">
                <div class="card-header">
                  <i class="bi bi-info-circle me-1"></i>
                  当前状态
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-6">记录状态:</div>
                    <div class="col-6" id="recording-status">未开始</div>
                  </div>
                  <div class="row mt-2">
                    <div class="col-6">截图间隔:</div>
                    <div class="col-6" id="screenshot-interval">1分钟</div>
                  </div>
                  <div class="row mt-2">
                    <div class="col-6">手账间隔:</div>
                    <div class="col-6" id="journal-interval">6分钟</div>
                  </div>
                  <div class="row mt-2">
                    <div class="col-6">历史条目数:</div>
                    <div class="col-6" id="history-count">0</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card mb-4">
                <div class="card-header">
                  <i class="bi bi-clock-history me-1"></i>
                  最近手账
                </div>
                <div class="card-body">
                  <div id="recent-journal">
                    <p class="text-muted">暂无最近手账</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 历史记录 -->
        <div class="content-section d-none" id="history-section">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">历史记录</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <div class="input-group me-2">
                <input type="date" class="form-control" id="start-date">
                <span class="input-group-text">至</span>
                <input type="date" class="form-control" id="end-date">
              </div>
              <select class="form-select me-2" id="type-filter">
                <option value="">全部类型</option>
                <option value="编程">编程</option>
                <option value="文档">文档</option>
                <option value="会议">会议</option>
                <option value="设计">设计</option>
                <option value="研究">研究</option>
                <option value="其他">其他</option>
              </select>
              <button type="button" class="btn btn-outline-secondary" id="filter-btn">
                <i class="bi bi-funnel"></i> 筛选
              </button>
            </div>
          </div>

          <div class="journals-container" id="journals-container">
            <!-- 历史记录将在这里动态加载 -->
            <p class="text-center text-muted my-5">暂无历史记录</p>
          </div>
        </div>

        <!-- 设置 -->
        <div class="content-section d-none" id="settings-section">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">设置</h1>
          </div>

          <div class="card mb-4">
            <div class="card-header">
              <i class="bi bi-sliders me-1"></i>
              参数设置
            </div>
            <div class="card-body">
              <form id="settings-form">
                <div class="mb-3">
                  <label for="screenshot-interval-input" class="form-label">截图间隔 (1-60分钟)</label>
                  <input type="number" class="form-control" id="screenshot-interval-input" min="1" max="60" value="1">
                  <div class="form-text">设置自动截图的时间间隔，单位为分钟</div>
                </div>
                <div class="mb-3">
                  <label for="journal-interval-input" class="form-label">手账生成间隔 (1-240分钟)</label>
                  <input type="number" class="form-control" id="journal-interval-input" min="1" max="240" value="6">
                  <div class="form-text">设置自动生成手账的时间间隔，单位为分钟</div>
                </div>
                <div class="mb-3">
                  <label for="history-count-input" class="form-label">历史附带条目数 (0-10条)</label>
                  <input type="number" class="form-control" id="history-count-input" min="0" max="10" value="0">
                  <div class="form-text">设置AI分析时附带的历史手账条目数量</div>
                </div>
                <button type="submit" class="btn btn-primary">保存设置</button>
              </form>
            </div>
          </div>

          <div class="card mb-4">
            <div class="card-header">
              <i class="bi bi-info-circle me-1"></i>
              关于
            </div>
            <div class="card-body">
              <h5>Techo - 数字工作手账 v1.0</h5>
              <p>为知识工作者提供自动化的数字工作记录解决方案，通过智能屏幕截图与AI分析技术，自动生成结构化的工作日志。</p>
              <p><strong>核心价值：</strong></p>
              <ul>
                <li>⏰ 自动化记录：无需手动记录工作过程</li>
                <li>🧠 智能分析：AI提炼有效工作内容</li>
                <li>📊 可视化复盘：结构化呈现工作轨迹</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 手账详情模态框 -->
        <div class="modal fade" id="journal-detail-modal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">手账详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body" id="journal-detail-content">
                <!-- 手账详情将在这里动态加载 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>